<template>
    <a-modal :visible="state.visible" :title="modalTitle" @cancel="handleCancel" @ok="handleOk">
        <AForm ref="formRef" :model="state.formData"  :labelCol="{style:'width:80px'}">
            <AFormItem label="图片上传" name="imgUrl" :rules="[{required:true,message:'必填'}]">
                <UploadImage v-if="!props.isDetail" v-model:value="state.formData.imgUrl"></UploadImage>
            </AFormItem>
            <AFormItem label="图片位置" name="type" :rules="[{required:true,message:'必填'}]">
                <ASelect v-model:value="state.formData.type" :options="state.itemizeList"></ASelect>
            </AFormItem>
            <AFormItem label="跳转连接" name="pageUrl">
                <AInput  v-if="!props.isDetail"  v-model:value="state.formData.pageUrl" :maxlength="255" show-count></AInput>
            </AFormItem>
            <AFormItem label="排序" name="sort" :rules="[{required:true,message:'必填'}]">
                <AInput  v-if="!props.isDetail"  v-model:value="state.formData.sort"></AInput>
            </AFormItem>

            <AFormItem label="是否隐藏" name="isShow" :rules="[{required:true,message:'必填'}]">
                <a-radio-group v-if="!props.isDetail" v-model:value="state.formData.isShow">
                    <a-radio :value="0">隐藏</a-radio>
                    <a-radio :value="1">显示</a-radio>
                </a-radio-group>
            </AFormItem>
            <AFormItem label="备注" name="descr" :rules="[{required:true,message:'必填'}]">
                <AInput  v-if="!props.isDetail"  v-model:value="state.formData.descr" :maxlength="255" show-count></AInput>
            </AFormItem>
        </AForm>
    </a-modal>
    </template>
    <script lang="ts" setup>
    import { ResponseVo,CarouselTypes } from "@/type";
    import { reactive,ref,onMounted,computed} from "vue";
    import { PackageService } from "@/service";
    import UploadImage from "@/components/UploadImage/UploadImage.vue";
    import { Carousel, message } from "ant-design-vue";
    import { CarouselService } from "@/service/carouselService";
    
    
    const props = withDefaults(defineProps<{
        current?:Partial<CarouselTypes.CarouselItem>;
        isDetail: boolean
    }>(),{
        current:():Partial<CarouselTypes.CarouselItem>=>({}),
        isDetail:false    
    })
    
    const formRef = ref()
    const emit = defineEmits<{
        (e:"ok"):void,
        (e:"cancel"):void
    }>()
    
    const state = reactive<{
        formData:Partial<CarouselTypes.CarouselItem>;
        visible: boolean,
        itemizeList:CarouselTypes.ItemizeItem[]
    }>({
        formData:{
            isShow:1
        },
        visible: true,
        itemizeList:[]
    })
    
    onMounted(()=>{
        state.formData = {...props.current};
        handleItemizeList();
    })

    const modalTitle = computed(()=>{
        if(props.isDetail)return "详情";
        if(props.current.id)return "编辑";
        if(!props.current.id)return "新增";
    })

    
const handleItemizeList = async()=>{
    let res:ResponseVo<CarouselTypes.ItemizeItem[]> = await CarouselService.itemizeList("APP_IMAGE");
    if(res.code===0){
        state.itemizeList = res.data;
    }
}


    const handleOk = async()=>{
        formRef.value.validateFields().then(async(valid:boolean)=>{
            if(valid){
                let res:ResponseVo<any>
                if(state.formData.id){
                    res = await CarouselService.editCarousel(state.formData as CarouselTypes.CarouselItem);
                }else{
                    state.formData.deleted = 0;
                   res = await CarouselService.addCarousel(state.formData as CarouselTypes.CarouselItem);
                }  
                if(res.code===0){
                    message.success("操作成功！");
                    emit("ok");
                } 
            }
        })
    }
    
    const handleCancel = ()=>{
        emit("cancel")
    }
    </script>
<style lang="less" scoped>

.scheme-stairs{
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    align-items: center;
    :deep(.ant-form-item){
        margin-bottom: 0;
    }
    .stairs-input{
        margin-left:4px;
        margin-right: 4px;
    }
    .scheme-stairs-content{
        display: flex;
        gap:8px;
    }
    .scheme-stairs-label{
        color: #888888;
        margin-right: 8px;
    }
}
</style>